<script setup lang="jsx">
import { computed, nextTick, onUnmounted, ref } from 'vue';
import dayjs from 'dayjs';

import { getPcbTypeSelect } from '@/service/api/modules/collection-management/hole-inspection';
const leftTableRef = ref(null);

const commonSearchRef = ref(null);
const searchParams = ref({
  lotnum: null, // 生产批号
  partnum: null, // 料号
  time: null, // 时间
  machineid: null // 机台号
});

// machineList是下拉机台号列表选项
const machineList = ref([]);
// 搜索框
const searchFormList = [
  {
    type: 'input',
    key: 'partnum',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },
  {
    type: 'input',
    key: 'lotnum',
    label: '批次号',
    placeholder: '请输入批次号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },

  {
    type: 'select',
    key: 'machineid',
    label: '机台号',
    placeholder: '请选择机台号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5,
    // 下拉选择框选项
    selectOptions: machineList
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 5
  }
];

// 左边表格数据
const columnChecks = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'partnum',
    dataIndex: 'partnum',
    title: '生产型号',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotnum',
    dataIndex: 'lotnum',
    title: '批次号',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'machineid',
    dataIndex: 'machineid',
    title: '机台号',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'qrcode',
    dataIndex: 'qrcode',
    title: '二维码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'passqnty',
    dataIndex: 'passqnty',
    title: 'OK数',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'failqnty',
    dataIndex: 'failqnty',
    title: 'NG数',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'fenestra',
    dataIndex: 'fenestra',
    title: '圆孔',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'longhole',
    dataIndex: 'longhole',
    title: '长孔',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'profiledhole',
    dataIndex: 'profiledhole',
    title: '异性孔',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'porous',
    dataIndex: 'porous',
    title: '多孔',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'oligopore',
    dataIndex: 'oligopore',
    title: '少孔',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'macropore',
    dataIndex: 'macropore',
    title: '孔大',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'kongxiaoxiao',
    dataIndex: 'kongxiaoxiao',
    title: '孔小',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'shapeng',
    dataIndex: 'shapeng',
    title: '外形NG',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'debris',
    dataIndex: 'debris',
    title: '残屑孔',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalhole',
    dataIndex: 'totalhole',
    title: '孔总数',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'userid',
    dataIndex: 'userid',
    title: '作业者',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'iotime',
    dataIndex: 'iotime',
    title: '读孔时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});
// 搜索

// 机台号下拉列表接口：getSystemList
function getSystemList() {
  getPcbTypeSelect().then(({ data, error }) => {
    machineList.value = data?.map(item => {
      return {
        label: item,
        value: item
      };
    });
  });
}
getSystemList();

function reset() {
  nextTick(() => {
    searchParams.value = {
      lotnum: null, // 生产批号
      partnum: null, // 料号
      time: null, // 时间
      machineid: null // 机台号
    };
    search();
  });
}

function search() {
  leftTableRef.value.getData(1);
}

// 右边表格数据
const rightTableColumns = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'machineid',
    dataIndex: 'machineid',
    title: '机台号',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  // {
  //   key: 'state',
  //   dataIndex: 'state',
  //   title: '状态',
  //   width: 100,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  // 验孔机状态 0-绿灯 1-红灯 3-黄灯
  {
    key: 'state',
    dataIndex: 'state',
    title: '验孔机状态',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.state == 0) {
        return <div class={'color-green'}>绿灯</div>;
      }
      if (record.state == 1) {
        return <div class={'color-red'}>红灯</div>;
      }
      if (record.state == 3) {
        return <div class={'color-yellow'}>黄灯</div>;
      }
    }
  },
  {
    key: 'iotime',
    dataIndex: 'iotime',
    title: '状态上传时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const rightSearcParams = ref({
  startTime: null, // 开始时间
  endTime: null, // 结束时间,
  machineid: null // 机台号
});

const rightTableRef = ref(null);

// 点击左边表格行触发右边表格前后20分钟内数据加载
function handleTableRowClick(record) {
  // 时间的前后20分钟数据
  rightSearcParams.value.machineid = record.machineid;

  rightSearcParams.value.startTime = dayjs(record.iotime).subtract(20, 'minutes').format('YYYY-MM-DD HH:mm:ss'); // 前20分钟
  rightSearcParams.value.endTime = dayjs(record.iotime).add(20, 'minutes').format('YYYY-MM-DD HH:mm:ss'); // 后20分钟

  rightTableRef.value.getData(1);
  console.log(rightSearcParams.value.startTime, rightSearcParams.value.endTime);
}

// 自动选中第一条数据，并触发右边表格数据加载
function handleLeftTableDataLoadSuccess(data) {
  handleTableRowClick(data[0]);

  leftTableRef.value.setCurrentRowId(data[0]);
}

const searchHeight = ref(42);

window.addEventListener('resize', () => {
  nextTick(() => {
    const ele = document.querySelector('.printed-code .search-box');
    const height = ele?.clientHeight;
    searchHeight.value = height || 42;
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', () => {});
});
</script>

<template>
  <div class="jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <ARow :gutter="[15, 0]" wrap class="h-full w-full" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <ACol :span="16" class="h-full">
        <Table
          ref="leftTableRef"
          v-model:searchParams="searchData"
          :show-row-selection="false"
          :column="columnChecks"
          :scroll="{ x: '1600', y: 'auto' }"
          auto-generate-uuid
          url="/vcp/ReadHole/selectAllInfo"
          class="h-full"
          @table-row-click="handleTableRowClick"
          @table-data-load-sucess="handleLeftTableDataLoadSuccess"
        >
          <template #footer>
            <div class="flex gap-15px">
              <div class="mt5px flex line-height-14px">
                <span class="font-size-16px color-#022749">右边表格数据为对应验孔机在读孔时间的前后20分钟内数据</span>
              </div>
            </div>
          </template>
        </Table>
      </ACol>
      <ACol :span="8" class="h-fullmin-h-500px h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
        <Table
          ref="rightTableRef"
          v-model:searchParams="rightSearcParams"
          :column="rightTableColumns"
          :show-row-selection="false"
          :scroll="{ x: 'auto', y: 1500 }"
          class="h-full"
          auto-generate-uuid
          :is-init-get-data="false"
          url="/vcp/ReadHole/selectAllState"
        />
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped></style>
